<template>
    <div class="order-page">
        <!-- 顶部选项卡 -->
        <van-tabs v-model="search.orderStatus" line-width="60px">
            <van-tab title="全部" :name="0"></van-tab>
            <van-tab title="进行中" :name="2"></van-tab>
            <van-tab title="待确认" :name="3"></van-tab>
            <van-tab title="已完成" :name="4"></van-tab>
        </van-tabs>

        <!-- 订单列表 -->
        <div class="order-list" v-if="filter().length">
            <div class="order-item" v-for="item in filter()" :key="'order-' + item.id">
                <div class="order-title">{{ findGame(item.gameId).gameName }}</div>
                <div class="order-status green">{{ item.orderStatus === 0 ? '已取消' : item.orderStatus === 1 ? '待接单' :
                    item.orderStatus === 2 ? '已接单' : item.orderStatus === 3 ? '待确认' : item.orderStatus === 4 ? '已完成' : ''
                }}</div>
                <div class="order-detail">
                    <div class="detail-row">
                        <span>订单编号：</span>
                        <span>{{ item.orderNo || '' }}</span>
                    </div>
                    <div class="detail-row">
                        <span>到手佣金：</span>
                        <span class="red">￥{{ self.parent ? ((Number(item.dashouyongjin) * 0.99) / (item.playerNum)).toFixed(2) :
                            (Number(item.dashouyongjin) / Number(item.playerNum) ).toFixed(2) }}</span>
                    </div>
                    <div class="detail-row">
                        <span>发单人：</span>
                        <span>{{ item.userId ? findUser(item.userId).nickName : '' }}</span>
                    </div>
                    <div class="detail-row">
                        <span>排位类型：</span>
                        <span>{{ item.playerNum === 1 ? '单排' : '双排' }}</span>
                    </div>
                    <div class="detail-row">
                        <span>语音频道：</span>
                        <span>{{ item.channel }}</span>
                    </div>
                    <div class="detail-row">
                        <span>游戏ID：</span>
                        <span>{{ item.laobanyouxiid }}</span>
                    </div>
                    <div class="detail-row">
                        <span>结算周期：</span>
                        <span>{{ findGame(item.gameId).days + '天' }}</span>
                    </div>
                    <div class="detail-row">
                        <span>备注：</span>
                        <span class="remark">{{ item.createRemark }}</span>
                    </div>
                    <div class="button-area">
                        <van-button size="mini" type="info" v-if="item.orderStatus === 1 && self.role === 2"
                            @click="modiySingle(item)">改为单排</van-button>
                        <van-button size="mini" type="info" v-if="item.orderStatus === 2 && self.role === 2"
                            @click="wancheng(item)">完成订单</van-button>
                        <van-button size="mini" type="danger" v-if="item.orderStatus < 3 && self.role === 2 ||
                            item.orderStatus === 2 && self.role === 2" @click="cancel(item)">取消订单</van-button>
                    </div>

                </div>
            </div>
        </div>
        <van-empty v-if="!filter().length" image="search" description="暂无订单" />
    </div>
</template>
  
<script>
import game from '@/plugins/api/game';
import order from '@/plugins/api/order';
import user from '@/plugins/api/user';
import dealApi from '@/plugins/api/deal';
import { fuzzyMatch } from '@/plugins/utils/filterArray';
import { formatTime, isOver5Minutes } from "@/plugins/utils/timeUtils";
import { userCaozuo, updateSelf, orderCaozuo } from '@/plugins/utils/caozuojilu'
export default {
    data() {
        return {
            gameList: [],
            orders: [],
            search: {
                orderStatus: null,
                playerId: null
            },
            self: this.$global.self,
            users: [],
            activeTab: 2
        }
    },
    mounted() {
        this.getGameList()
        this.getOrderList()
        this.getUserList()
    },
    methods: {
        async getGameList() {
            const res = await game.list()
            if (res.code === 200) {
                this.gameList = res.data
            }
        },
        async getUserList() {
            const res = await user.all()
            if (res.code === 200) {
                this.users = res.data
            }
        },
        formatDate(timestamp) {
            // console.log(timestamp);

            return formatTime(timestamp)
        },
        async getOrderList() {
            const res = await order.list()
            if (res.code === 200) {
                this.orders = res.data.filter(item => item.orderStatus !== 9)
                console.log('get order -> ', this.orders);
            }
        },
        findGame(gameId) {
            return this.gameList.find(item => item.id === gameId)
        },
        findUser(id) {
            console.log('id -> ' + id + 'obj -> ', this.users.find(item => item.id === id));

            return this.users.find(item => item.id === id)
        },
        filter() {
            const that = this
            console.log(that.search);
            if (that.self.role === 2) {
                if (that.search.orderStatus === 0) {
                    const obj = {
                        playerId: String(that.self.id)
                    }
                    return fuzzyMatch(that.orders, obj).sort((a, b) => a.orderStatus - b.orderStatus)
                }
                that.search.playerId = String(that.self.id)
                console.log('filter -> ', fuzzyMatch(that.orders, that.search));

                return fuzzyMatch(that.orders, that.search)
            }
            if (that.self.role === 1) {
                const obj = {}
                obj.userId = that.self.id
                obj.gameId = that.search.gameId ? that.search.gameId : null
                return fuzzyMatch(that.orders, obj)
            }
            return []
        },
        async cancel(item) {
            const that = this
            if (isOver5Minutes(item.jiedanTime)) {
                let fakuan = 50
                // if (that.self.dongjie && Number(that.self.dongjie) >= fakuan) {
                //     that.self.dongjie = Number(that.self.dongjie) - fakuan
                // } else if (Number(that.self.dongjie) > 0) {
                //     fakuan = fakuan - Number(that.self.dongjie)
                // }

                // if (that.self.weijiesuan && fakuan && Number(that.self.weijiesuan) >= fakuan) {
                //     that.self.weijiesuan = Number(that.self.weijiesuan) - fakuan
                // } else if (Number(that.self.weijiesuan) > 0) {
                //     fakuan = fakuan - Number(that.self.weijiesuan)
                // }

                // if (fakuan) {
                //     that.self.yajin = Number(that.self.yajin) - fakuan
                // }
                // const userRes = await user.update(that.self)
                // if (userRes.code === 200) {
                // updateSelf(userRes.data)
                const dealobj = {
                    userId: that.self.id,
                    value: `-50`,
                    type: 3,
                    createTime: new Date().getTime(),
                    orderNo: item.orderNo
                }
                await dealApi.modify(dealobj)
                that.$toast.success('取消成功')
                // }
            }
            const parr = item.playerId.split(',')
            const arr = parr.filter(item => Number(item) !== this.self.id)
            item.orderStatus = 1
            item.playerId = arr.join(',')
            item.jiedanTime = null
            console.log('item -> ', item);

            const res = await order.modify(item)
            if (res.code === 200) {
                await orderCaozuo.update(item)
                this.getOrderList()
            } else {
                this.$toast.fail(res.msg)
            }
        },
        async modiySingle(item) {
            item.orderStatus = 2
            item.playerNum = 1
            item.jiedanTime = new Date().getTime()
            const res = await order.modify(item)
            if (res.code === 200) {
                await orderCaozuo.update(item)
                this.getOrderList()
            } else {
                this.$toast.fail(res.msg)
            }
        },
        async wancheng(item) {
            localStorage.setItem('orderItem', JSON.stringify(item))
            this.$router.push('/order/complate')
            // item.orderStatus = 3
            // item.wanchengTime = new Date().getTime()
            // const res = await order.modify(item)
            // if (res.code === 200) {
            //     await orderCaozuo.update(item)
            //     this.getOrderList()
            // } else {
            //     this.$toast.fail(res.msg)
            // }
        },
    }
}
</script>
  
<style lang="scss" scoped>
@import '../assets/global/mixin.scss';

.order-page {
    // padding: 0 16px;
    // background: #fff;
}

// 选项卡样式
::v-deep .van-tabs__line {
    background-color: #1989fa;
}

::v-deep .van-tab {
    font-size: 15px;
    color: #666;

    &--active {
        font-weight: bold;
        color: #333;
    }
}

.order-list {
    margin-top: 12px;
    padding: 0 16px;
}

.order-item {
    border-radius: 8px;
    background: #fff;
    padding: 16px;
    margin-bottom: 12px;
    position: relative;
}

.button-area {
    width: 100%;
    @include flex(row, flex-end, center);
}

.order-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80%;
}

.order-status {
    position: absolute;
    right: 16px;
    top: 16px;
    font-size: 14px;
    font-weight: 500;

    &.blue {
        color: #1989fa;
    }

    &.green {
        color: #07C160;
    }
}

.order-detail {
    font-size: 14px;
    color: #666;
}

.detail-row {
    display: flex;
    margin-bottom: 8px;

    &:last-child {
        margin-bottom: 0;
    }

    span:first-child {
        width: 80px;
        flex-shrink: 0;
    }
}

.red {
    color: #F56C6C;
    font-weight: 500;
}

.remark {
    color: #999;
    line-height: 1.4;
}
</style>